import React from "react";
import {Table, Breadcrumb, Button, Input, Tag, Modal, message} from 'antd';
import CustomLayout from "../../../components/CustomLayout/customLayout";
import AddModal from "./add";
import {_deleteSysUser, _getRolePullDown, _querySysUserPage} from "../../../utils/apiList";
import EditModal from "./edit";

const {Search} = Input;

class AdminUserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabData: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            editRecord: {},
            tabLoading: false,
            roleList: [],
        };
        this.addModalRef = React.createRef();
        this.editModalRef = React.createRef();
    }

    componentDidMount() {
        this.loadTable();
        this.getOptions();
    }


    loadTable() {
        const {pageNum, pageSize} = this.state;
        this.setState({tabLoading: true});
        _querySysUserPage({pageNo: pageNum, pageSize}).then((res) => {
            if (res.data.success) {
                this.setState({
                    tabData: res.data.data.list ? res.data.data.list : [],
                    total: res.data.data.total ? res.data.data.total : [],
                    tabLoading: false,
                })
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    }

    getOptions = () => {
        _getRolePullDown().then((res) => {
            if (res.data.success) {
                this.setState({roleList: res.data.data ? res.data.data : [],});
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };

    changePageSize(pageSize, current) {
        this.setState({pageSize, pageNum: 1}, () => this.loadTable())
    }

    changePage(current) {
        this.setState({pageNum: current}, () => this.loadTable())
    }

    handleDelete = (id) => {
        _deleteSysUser({id}).then((res) => {
            if (res.data.success) {
                message.success(<b>删除成功</b>, 3);
                this.loadTable();
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };


    render() {
        const {tabData, pageSize, pageNum, total, tabLoading, editRecord, roleList} = this.state;
        const columns = [
            {
                title: '登陆名',
                dataIndex: 'userName',
                key: 'userName',
                width: 200,
                align: 'center'
            },
            {
                title: '真实姓名',
                dataIndex: 'userNameCn',
                key: 'userNameCn',
                width: 150,
                align: 'center'
            },
            {
                title: '联系手机',
                dataIndex: 'phone',
                key: 'phone',
                align: 'center'
            },
            {
                title: '邮箱',
                dataIndex: 'mail',
                key: 'mail',
                align: 'center'
            },
            {
                title: '变更时间',
                dataIndex: 'gmtModified',
                key: 'gmtModified',
                width: 220,
                align: 'center'
            },
            {
                title: '权限类型',
                dataIndex: 'userType',
                key: 'userType',
                align: 'center',
                width: 100,
                render: (val, record) => {
                    return <Tag color="#2db7f5">{val}</Tag>
                },
            },
            // {
            //     title: '是否可用',
            //     dataIndex: 'status',
            //     key: 'status',
            //     align: 'center',
            //     render: (val, record) => {
            //         return <Tag color="#2db7f5">{val}</Tag>
            //     },
            // },
            {
                title: '操作',
                key: 'operation',
                width: 200,
                align: 'center',
                render: (text, record) => (<div>
                    <Button style={{marginRight: 10}} type="primary"
                            onClick={() => this.editModalRef.current.showModal(record)}
                    >修改</Button>
                    <Button style={{marginRight: 10}} type="danger"
                            onClick={() => this.handleDelete(record.id)}>删除</Button>
                </div>),
            },
        ];
        return (
            <CustomLayout>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                    <Breadcrumb.Item>后台用户信息库</Breadcrumb.Item>
                </Breadcrumb>
                <div className={'App-Section'}>
                    <div style={{margin: 10}}>
                        <Button style={{marginRight: 10}} type="primary"
                                onClick={() => this.addModalRef.current.showModal()}>添加</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowKey={'id'}
                        loading={tabLoading}
                        // rowSelection={rowSelection}
                        // expandedRowRender={expandedRowRender}
                        dataSource={tabData}
                        pagination={{
                            showSizeChanger: true,
                            showQuickJumper: false,
                            showTotal: () => `共${total}条`,
                            pageSize: pageSize,
                            current: pageNum,
                            total,
                            onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
                            onChange: (current) => this.changePage(current),
                        }}
                    />
                </div>
                <AddModal ref={this.addModalRef} parent={this} roleList={roleList}/>
                <EditModal ref={this.editModalRef} parent={this} editRecord={editRecord} roleList={roleList}/>
            </CustomLayout>
        );
    }
}

export default AdminUserList;